<template>
	<view class="u-p-30">
		<view class="u-flex u-row-between bg_FFFFFF u-p-20 u-b-r-16" @click="address_show=true">
			<view class="u-flex">
				<u-icon name="map" color='#FB473CFF' size='30'></u-icon>
				<view class="u-p-l-10" v-if="address.length==0">暂无收货地址</view>
				<view class=" u-p-l-10">
					<view class="">
						<text class="u_inline-block u-p-r-30 u-weight">{{userinfo.items[0].addressee_name}}</text>
						<text class="u_inline-block u-weight">{{userinfo.items[0].addressee_telphone}}</text>
					</view>
					<view class="u-p-t-10 u-font-24">{{userinfo.items[0].address}}</view>
				</view>
			</view>

			<u-icon name="arrow-right"></u-icon>
		</view>

		<view class="bg_FFFFFF u-p-30 u-m-t-30 u-b-r-16" v-for="(item,index) in userinfo.items" :key="index">
			<view class="u-flex" style="border-bottom: 1rpx solid #F1F1F1FF;">
				<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/shop.png" mode="aspectFill" width="36rpx" height='36rpx'>
				</u-image>
				<view class="u-weight u-p-b-10 u-m-l-20">{{item.shop_name}}</view>
			</view>


			<view class="u-p-30 u-flex" style="border-bottom: 1rpx solid #F1F1F1FF;" v-for="(items,index1) in item.goods"
				:key="index1">
				<view class="  u-w-178 u-h-178">
					<u-image :src="list.prizeIcon" mode="aspectFill" width="178rpx" height='178rpx'></u-image>
				</view>

				<view class=" u-h-178 u-w-600 u-p-20">
					<view class=" u-weight">{{items.goods_name}}</view>
					<view class="u-font-20 u-m-t-20 cl_999 "
						style="background-color:#F8F8F8;display: inline-block; padding: 0 10rpx;">
						{{items.spece_value_title}}
					</view>
					<view class="u-flex u-row-between u-m-t-40">
						<view class="">
							<view class="u-flex" style="color:#FC3533FF ;">
								<text>￥{{items.price}}</text>+
								<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/money.png" mode="aspectFill" width="36rpx"
									height='36rpx'></u-image>
								<text>{{items.score_rate}}%</text>
							</view>
						</view>

						<view class="u-p-l-40">×{{items.num}}</view>
					</view>
				</view>

			</view>

			<view class="u-p-20 u-flex u-row-between">
				<view class="" style="color: #454545FF;">快递运费</view>
				<view class="u-weight">包邮</view>

			</view>
			<view class="u-flex u-p-20 u-row-between">
				<view class="cl_454545FF">备注</view>
				<view class="cl_454545FF u-font-20">订单备注可选</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="u-p-30">
			<view class="u-flex-col u-col-center">- 支付方式 -</view>
		</view>

		<!-- 支付类型 -->
		<view class="bg_FFFFFF">
			<view class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view class="u-flex">
					<view class=" u-flex">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/card.png" mode="aspectFill" width="50rpx"
							height='50rpx'>
						</u-image>
						<view class="u-m-l-30 u-font-28 u-weight">钱包支付</view>
					</view>
					<!-- <view class="u-m-l-30 cl_898989FF u-font-24">可用<text class="cl_FB473CFF">￥2345</text></view> -->
				</view>
				<view class="u-flex">
					<!-- <view class="u-m-r-20 cl_FB473CFF">-￥56</view> -->
					<view class="" @click="pays='deposit'">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
							height='30rpx' v-if="pays=='deposit'"></u-image>
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
							v-else>
						</u-image>
					</view>
				</view>

			</view>

			<!-- 易支付 -->
			<view @click="openEpayDialog" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view class="">
					<view class=" u-flex">
						<u-image src="http://xcx.itcwc.com/wxImg/5dcf4786109a5.png" mode="aspectFill" width="50rpx" height='50rpx'>
						</u-image>
						<view class="u-m-l-30 u-font-28 ">易支付</view>
					</view>

				</view>
				<view class="u-flex">
					<!-- <view class="u-m-r-20 cl_FB473CFF">-￥{{userinfo.goods_amount}}</view> -->
					<view class="">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
							height='30rpx' v-if="pays == 'epay' || pays == 'wxpay' || pays == 'alipay'"></u-image>
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
							v-else>
						</u-image>
					</view>
				</view>
			</view>

			<view class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view class="">
					<view class=" u-flex">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="50rpx"
							height='50rpx'>
						</u-image>
						<view class="u-m-l-30 u-font-28 u-weight">微信支付</view>
					</view>

				</view>
				<view class="u-flex">
					<!-- <view class="u-m-r-20 cl_FB473CFF">-￥56</view> -->
					<view class="" @click="pays='wechat'">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
							height='30rpx' v-if="pays=='wechat'"></u-image>
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
							v-else>
						</u-image>
					</view>

				</view>

			</view>

			<view class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
				<view class="">
					<view class=" u-flex">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="50rpx"
							height='50rpx'>
						</u-image>
						<view class="u-m-l-30 u-font-28 u-weight">支付宝支付</view>
					</view>

				</view>
				<view class="u-flex">
					<!-- <view class="u-m-r-20 cl_FB473CFF">-￥56</view> -->
					<view class="" @click="pays='alipay'">
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
							height='30rpx' v-if="pays=='alipay'"></u-image>
						<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx" height='30rpx'
							v-else>
						</u-image>
					</view>
				</view>

			</view>

		</view>
		<!-- 可用积分 -->
		<view class="u-p-b-150">
			<view class="bg_FFFFFF u-m-t-30">
				<view class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="u-flex">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/jf.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 u-weight">积分</view>
						</view>
						<view class="u-m-l-30 cl_898989FF u-font-24">可用积分<text class="cl_FB473CFF">{{yu.score}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 立即兑换 -->
		<view class="u-fix u-h-120 u-b-0 u-w-750 bg_FFFFFF">
			<!-- <view class=" u-w-640 u-h-98 u-text-center">提交</view> -->
			<view @click="true_pays" class="u-w-640 u-auto u-h-98 bl2C_3F u-l-h-98 u-text-center u-b-r-20 u-auto"
				style="letter-spacing: 4rpx;color: #ffffff;">立即支付</view>
		</view>

		<!-- 选择规格大小 -->
		<u-select v-model="show" :list="list1" @cancel='show=false' @confirm='confirm'></u-select>

		<u-popup v-model="shows" mode='center'>
			<view class="u-p-30 u-h-200">
				<u-message-input :focus="true" :maxlength='6' @change="change" @finish="finish"></u-message-input>
			</view>

		</u-popup>

		<u-popup v-model="address_show" mode='bottom' :closeable='true'>
			<view class="u-p-20">
				<view class="u-text-center u-p-t-30">选择收货地址</view>

				<view class="u-flex-col u-col-center u-m-t-50" v-if="address.length==0">
					<u-image src="https://www.sqkjkj.vip/wxImg/1.png" width='100rpx' height='100rpx'></u-image>
					<view class="cl_999 u-font-30 u-m-t-30">暂无收货地址</view>
				</view>

				<scroll-view scroll-y="true">
					<view class="u-h-300">
						<view class="u-p-t-20 u-flex" v-for="(item,index) in address" :key="index">
							<view class="">
								<u-image src="https://www.sqkjkj.vip/wxImg/car/img2.png" mode="aspectFill" width="40rpx" height='40rpx'
									v-if="addres_id==item.id">
								</u-image>
								<u-image src="https://www.sqkjkj.vip/wxImg/car/img.png" mode="aspectFill" width="40rpx" height='40rpx'
									v-else @click='choes(item)'>
								</u-image>


							</view>
							<view class="u-p-l-40">
								<view class="u-flex">
									<view class="u-font-24">{{item.name}}</view>
									<view class=" u-font-24 u-p-l-20">{{item.phone}}</view>
								</view>
								<view class="u-p-10 u-font-20 cl_999">{{item.modify_region.name}}</view>
							</view>
						</view>
					</view>
				</scroll-view>


				<view class="bg_FFFFFF">
					<u-row>
						<u-col span='6'>

							<view class="u-w-310 u-m-t-50 u-b-r-14 u-h-90 u-l-h-90 u-font-30 bg_FF5502FF u-text-center cl_FFF"
								@click="$u.route('/pages/address/addAddress')">添加新地址</view>

						</u-col>
						<u-col span='6'>
							<view class="u-w-310 u-m-t-50 u-b-r-14 u-h-90 u-l-h-90 u-font-30 bg_FF5502FF u-text-center cl_FFF"
								@click="address_show=false">确定</view>
						</u-col>
					</u-row>
				</view>


			</view>

		</u-popup>

		<!-- 易支付选择弹窗 -->
		<u-popup v-model="showEpayDialog" mode="center" width="80%" border-radius="10">
			<view class="epay-dialog">
				<view class="epay-dialog-title">请选择支付方式</view>
				<view class="epay-dialog-content">
					<view class="epay-payment-option" @click="selectEpayMethod('wxpay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayParams.epay_type === 'wxpay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<!-- 在微信小程序环境下不显示支付宝支付选项 -->
					<view class="epay-payment-option" @click="selectEpayMethod('alipay')" v-if="!isWechatMP">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayParams.epay_type === 'alipay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">支付宝支付</view>
					</view>
				</view>
				<view class="epay-dialog-footer">
					<view class="epay-dialog-btn cancel-btn" @click="showEpayDialog = false">取消</view>
					<view class="epay-dialog-btn confirm-btn" @click="confirmEpayMethod">确定</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 商品信息
			list: {},
			// 选择规格弹窗
			show: false,
			// 规格大小
			sizes: 'M',
			// 支付方式
			pays: 'deposit',
			// 是否使用积分
			pays1: 'jf',
			// 规格数据
			list1: [{
				value: '1',
				label: 'M'
			},
			{
				value: '2',
				label: 'S'
			}
			],
			userinfo: '',
			yu: '',
			arr: [],
			// 密码输入
			shows: false,
			massage_pay: '',
			// 选择地址
			address_show: false,
			// 地址列表
			address: [],
			addres_id: '',
			type: '',
			pay_class: '',
			// 易支付相关参数
			epayParams: {
				epay_type: 'wxpay',
				total_amount: 0,
				trade_id: '',
				target_type: '',
				method: '',
			},
			showEpayDialog: false,
			isWechatMP: false
		}
	},

	onLoad() {
		this.userinfo = uni.getStorageSync("pay_massage")
		console.log(this.userinfo.items);
		// 获取我的余额
		this.yu = uni.getStorageSync("userinfo")
		this.massage()
		this.choes_address()
		this.detectDeviceType()
	},
	onShow() {
		this.choes_address()
	},
	methods: {
		// 选择地址
		choes_address() {
			this.$api.my_address_list({}, res => {
				console.log(res);
				this.address = res.data.data.data
				for (var i = 0; i < this.address.length; i++) {
					console.log(this.address[i].modify_region.name);
					this.address[i].modify_region.name = (this.address[i].modify_region.name).split('/')
					this.address[i].modify_region.name = this.address[i].modify_region.name[0] + '-' + this
						.address[i].modify_region.name[1] + '-' + this.address[i].modify_region.name[2] + '-' +
						this.address[i].addr
				}
				console.log(this.address);
			})
		},

		massage() {
			this.arr = []
			for (var i = 0; i < this.userinfo.items[0].goods.length; i++) {
				let massage = {
					goods_item_id: this.userinfo.items[0].goods[i].goods_id,
					num: this.userinfo.items[0].goods[i].num
				}
				this.arr.push(massage)
			}
		},
		choes(item) {
			this.addres_id = item.id
			this.userinfo.items[0].address_id = this.addres_id
			this.userinfo.items[0].addressee_name = item.name
			this.userinfo.items[0].addressee_telphone = item.phone
			this.userinfo.items[0].address = item.modify_region.name
		},
		// 点击确定选择规格
		confirm(e) {
			console.log(e);
			this.sizes = e[0].label
			this.show = false
		},
		// 点击立即支付
		true_pays() {
			console.log(this.userinfo.items[0].address_id);
			if (this.address.length == 0) {
				uni.showToast({
					icon: 'error',
					title: "请先添加地址"
				})
				this.address_show = true
				return
			}
			// 余额支付下单
			this.$api.true_pays_list({
				address_id: this.userinfo.items[0].address_id,
				buy_source: "buy_now",
				order_type: 1,
				sku_details: this.arr,
				regcode: uni.getStorageSync('regcode')
			}, res => {
				console.log(res);
				if (res.data.code == 1) {
					this.massage_pay = res.data.data
					if (this.pays == 'deposit' ) {
						// this.shows = true
						this.pay()
					}else if(this.pays == 'epay'){
						this.pay()
					}else {
						uni.showToast({
							icon: 'error',
							title: res.data.msg
						})
					}


				} else {
					uni.showToast({
						icon: 'error',
						title: res.data.msg
					})
				}
			})
		},

		change(e) {
			console.log('内容改变，当前值为：' + e);
		},

		finish(e) {
			console.log('输入结束，当前值为：' + e);
			this.pay(e)
			this.shows = false
		},

		pay(obj = '') {
			if (this.pays == 'epay') {
				// 易支付
				let params = {
					target_id: this.massage_pay.trade_id,
					target_type: this.massage_pay.target_type,
					pay_type: 'epay',
					total_amount: this.massage_pay.total_amount,
					method: this.epayParams.method,
					type: this.epayParams.epay_type,
					// 根据不同平台设置不同的client参数
					// #ifdef APP-PLUS
					client: 'APP',
					// #endif
					// #ifdef MP-WEIXIN || MP-ALIPAY
					client: 'JSAPI',
					// #endif
					// #ifdef H5
					client: 'WAP',
					// #endif
					random: 1
				}
				this.$com.easyPay(params, 'epay');
			} else {
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				this.$api.go_pay({
					target_id: this.massage_pay.trade_id,
					target_type: this.massage_pay.target_type,
					pay_type: this.pays,
					client: "APP",
					trade_pwd: obj
				}, res => {
					console.log(res);
					uni.hideLoading();
					if (res.data.code == 1) {
						// uni.navigateTo({
						// 	url: '/pages/home/paysuccess'
						// })
						uni.showToast({
							icon: 'success',
							title: '支付成功'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}, 500)

					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			}

		},

		// 易支付选择方法
		selectEpayMethod(type) {
			this.epayParams.epay_type = type
			this.showEpayDialog = false
			this.pays = 'epay'
		},

		confirmEpayMethod() {
			this.pays = this.epayParams.epay_type
			this.showEpayDialog = false
		},

		// 打开易支付弹窗
		openEpayDialog() {
			this.pays = 'epay'
			this.showEpayDialog = true
		},

		detectDeviceType() {
			// #ifdef H5
			this.epayParams.method = 'web' // H5环境使用web
			this.isWechatMP = false
			// #endif

			// #ifdef MP-WEIXIN
			this.epayParams.method = 'jsapi' // 微信小程序环境使用jsapi
			this.isWechatMP = true
			// #endif

			// #ifdef MP-ALIPAY
			this.epayParams.method = 'jsapi' // 支付宝小程序环境使用jsapi
			this.isWechatMP = false
			// #endif

			// #ifdef APP-PLUS
			this.params.method = 'web' // APP环境使用app
			this.isWechatMP = false
			// #endif

			console.log('是否为微信小程序:', this.isWechatMP)
		}
	}
}
</script>

<style scoped>
page {
	background: #F5F5F5FF !important;
}

/* 易支付选择弹窗样式 */
.epay-dialog {
	background-color: #fff;
	padding: 30rpx;
}

.epay-dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.epay-dialog-content {
	padding: 20rpx 0;
}

.epay-payment-option {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.radio-button {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: transparent;
}

.radio-selected {
	background-color: #3298FD;
}

.payment-icon {
	margin-right: 20rpx;
}

.payment-name {
	font-size: 28rpx;
}

.epay-dialog-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}

.epay-dialog-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}

.confirm-btn {
	background-color: #3298FD;
	color: #fff;
}
</style>
